<template>
	<uni-nav-bar title="大客户列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package">
		<input class="uni-input" confirm-type="search" placeholder="搜索手机号/姓名" @confirm="confirm" v-model="search"
			@input="interrogate" />
	</view>
	<scroll-view scroll-y="true" enable-back-to-top class="scroll-box"
		:style="{ height: pageHeight + 'px' }">
		<view class="package space-between" v-for="(item,index) in keyIng" :key="item.id" @click="navTo(item.page)"
			:style="{marginTop:index===0?'0px':'15rpx'}">
			<view style="color:#2694FB">{{item.name}}</view>
			<uni-icons type="forward" size="20"></uni-icons>
		</view>
		<view class="package" v-for="(item,index) in keyList" :key="item.id"
			@click="navTo('administrator/keyaccount/keyDetail?id='+item.id)"
			:style="{marginTop:index===0?'0px':'15rpx'}">
			<view class="space-between">
				<view>大客户名称</view>
				<view>{{item.name}}</view>
			</view>
			<view class="space-between top">
				<view>剩余额度</view>
				<view>{{item.amount}}元</view>
			</view>
		</view>
	</scroll-view>
	<view class="add" @click="navTo('administrator/keyaccount/addKey')">新增</view>
</template>

<script setup lang="ts">
	import { navBack, navTo } from '@/utils/navigator';
	import { showLoading, errorToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { getCustomersList, getCustomersApplyList } from '@/gql/administrator';
	import { onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	/**
	 * 大客户列表
	 * @property {Number} keyList 已经完成的大客户列表 
	 * @property {Number} keyIng 正在进行中的大客户列表
	 * @property {Number} pageHeight 页面高度
	 */
	const search = ref('')
	const inquireAbout = ref(false)
	const keyList = ref([])
	const keyIng = ref([])
	const pageHeight = ref()
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = (res.windowHeight - 170).toString();
		},
	});
	onShow(() => {
		KeyAll()
		KeyIngs()
	})
	//大客户列表
	function KeyAll() {
		showLoading('正在加载');
		const payload = {
			query: getCustomersList,
			variables: {
				type: 'apply',
				keywords: search.value,
			},
		};
		toPublish('ql/control/getCustomersList', payload, (obj : any) => {
			uni.hideLoading();
			const { data } = obj;
			keyList.value = data.getCustomersList;
		});
	}
	//正在进行中的大客户列表
	function KeyIngs() {
		showLoading('正在加载');
		const payload = {
			query: getCustomersApplyList,
		};
		toPublish('ql/control/getCustomersApplyList', payload, (obj : any) => {
			uni.hideLoading();
			const { getCustomersApplyList } = obj.data;
			keyIng.value = getCustomersApplyList;
		});
	}
	/**
	 * 搜索内容
	 * @property {Object} evt 监听搜索框输入信息
	 */
	function interrogate(evt : any) {
		const { detail } = evt;
		if (!detail.value && inquireAbout) {
			console.log(detail.value)
			keyList.value = [];
			KeyAll();
		}
	}
	/**
	 * 搜索
	 */
	function confirm() {
		if (search.value) {
			inquireAbout.value = search.value ? true : false;
			keyList.value = [];
			KeyAll();
		} else {
			errorToast('请输入您要搜索的内容')
		}
	}
</script>

<style scoped lang="less">
	.top {
		margin-top: 10rpx;
	}

	.add {
		width: 480rpx;
		height: 100rpx;
		background: linear-gradient(-10deg, #2C96F9, #1B91FF);
		border-radius: 5px;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		margin: 20rpx auto;
		font-size: 32rpx;
	}
</style>